<div class="popInMessageHolder js-popInMessages"></div>
<div class="userPageSearchBar flex gutterHSm <% if (ob.isFetching || ob.fetchFailed || !ob.listingCount) print('disabled') %>">
  <div class="flexExpand">
    <div class="searchWrapper">
      <input type="text" class="ctrl searchInput clrP clrBr clrSh2 js-searchInput"
             placeholder="<%= ob.polyT('userPage.searchStore') %>">
    </div>
  </div>
  <div>
    <div class="clrT2 clrSh2">
      <a class="iconBtn clrP clrBr toolTipNoWrap js-toggleListGridView" data-tip="<%= ob.polyT('userPage.store.toolTip.contentView') %>"><i class="ion-android-apps gridViewIcon"></i><i class="ion-navicon listViewIcon"></i></i></a>
    </div>
  </div>
</div>
<% if (ob.isFetching) { %>
  <div class="txCtr padHg contentBox clrBr clrP"><%= ob.spinner({ className: 'spinnerLg' }) %></div>
<% } else if (ob.fetchFailed) { %>
  <div class="txCtr padHg contentBox clrBr clrP">
    <h3><%= ob.polyT('userPage.store.unableToFetchListings') %></h3>
    <p><%= ob.fetchFailReason %></p>
    <%= ob.processingButton({
      className: 'btn clrP clrBr js-retryFetch',
      btnText: ob.polyT('userPage.store.retryStoreFetch')
    }) %>
  </div>
<% } else if (!ob.isFetching) { %>
  <div class="flex">
    <div class="col storeFilters <% if (!ob.listingCount) print('disabled') %>">
      <div class="js-shippingFilterContainer clrP clrBr padMd clrT clrSh2 contentBox">
        <div class="txB rowSm"><%= ob.polyT('userPage.store.shippingFilter.heading') %></div>
        <div class="flexVCent rowSm">
          <label class="margRSm" for="shipsToSelect"><%= ob.polyT('userPage.store.shippingFilter.shipsTo') %>:</label>
          <select class="tx6 select2Small js-shipsToSelect" style="width: 133px" id="shipsToSelect">
            <option value="any" <% if (ob.shipsToSelected === 'any') print('selected') %>><%= ob.polyT('userPage.store.shipsToFilterAny') %></option>
            <% ob.countryList.forEach((country) => { %>
            <option value="<%= country.dataName %>" <% if (country.dataName === ob.shipsToSelected) print('selected') %>><%= country.name %></option>
            <% }); %>
          </select>
          <div class="select2Small js-shipsToSelectDropdownContainer"></div>
        </div>
        <div class="flexVCent rowSm">
          <input type="checkbox" id="filterFreeShipping" class="margRSm js-filterFreeShipping" <% if (ob.filter.freeShipping) print('checked') %> />
          <label for="filterFreeShipping"></label><!-- label for the replacement checkbox -->
          <label class="clrE1 clrTOnEmph phraseBox" for="filterFreeShipping"><%= ob.polyT('userPage.store.freeShippingBanner') %></label>
        </div>
      </div>
      <div class="js-catFilterContainer"></div>
      <div class="js-typeFilterContainer"></div>
    </div>
    <div class="col storeListings">
      <% if (ob.listingCount) { %>
      <div class="row clrT tx5 flexVBot listingsHeaderRow">
        <span class="listingsCount js-listingCount"></span>
        <div>
          <div class="tx6 flexVCent">
            <label class="clrT2 marginLAuto margRSm"><%= ob.polyT('userPage.store.sortBy') %></label>
            <select class="tx6 select2Small js-sortBySelect" style="width: 150px">
              <option value="PRICE_ASC" <% if (ob.filter.sortBy === 'PRICE_ASC') print('selected') %>><%= ob.polyT('userPage.store.sortOpts.priceAsc') %></option>
              <option value="PRICE_DESC" <% if (ob.filter.sortBy === 'PRICE_DESC') print('selected') %>><%= ob.polyT('userPage.store.sortOpts.priceDesc') %></option>
              <option value="NAME_ASC" <% if (ob.filter.sortBy === 'NAME_ASC') print('selected') %>><%= ob.polyT('userPage.store.sortOpts.nameAsc') %></option>
              <option value="NAME_DESC" <% if (ob.filter.sortBy === 'NAME_DESC') print('selected') %>><%= ob.polyT('userPage.store.sortOpts.nameDesc') %></option>
              <!-- <option value="RATING">Rating</option> -->
            </select>
            <div class="select2Small js-sortBySelectDropdownContainer"></div>
          </div>
        </div>
      </div>
        <div class="contentBox row pad clrP clrBr js-inactiveWarning <% if (ob.vendor) print('hide') %>">
          <% const inactiveLink = `<button class="btnTxtOnly txU txUnb clrT2 js-activateStore">${ob.polyT('userPage.store.inactiveLink')}</button>`; %>
          <span class="tx5"><%= ob.parseEmojis('🔒') %> <%= ob.polyT('userPage.store.inactive', { link: inactiveLink }) %></span>
        </div>
      <div class="js-listingsContainer"></div>
      <div class="txCtr padGi clrP clrSh2 clrBr tx4 contentBox js-noResults hide">
        <p><%= ob.polyT('userPage.store.noListingsFound') %></p>
        <div class="btn clrP clrBr js-clearSearch"><%= ob.polyT('userPage.store.btnClearSearch') %></div>
      </div>
      <% } else { %>
      <div class="txCtr padGi tx4"><%= ob.polyT('userPage.store.noListings') %></div>
      <% } %>
    </div>
  </div>
<% } %>
